<template>
  <div class="home-charts"></div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { theme } from "@/components/common/z-theme";
let myChart: echarts.ECharts | null = null;
const init = () => {
  const textColor = getComputedStyle(document.body).getPropertyValue(
    "--color-text-1"
  );
  const lineColor = getComputedStyle(document.body).getPropertyValue(
    "--color-neutral-2"
  );

  let themeColor = ["#9b95c9", "#007d65"];
  console.log(theme.value, "000");

  if (theme.value == "dark") {
    themeColor = ["#444693", "#deab8a"];
  }

  const option = {
    color: themeColor,
    title: {
      text: "登录数据",
      textStyle: {
        color: textColor,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["登录", "注册"],
      textStyle: {
        color: textColor,
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            color: lineColor,
          },
        },
      },
    ],
    series: [
      {
        name: "登录",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
      },
      {
        name: "注册",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
      },
    ],
  };

  option && myChart.setOption(option);
};

onMounted(() => {
  const chartDom = document.querySelector(".home-charts") as HTMLElement;
  myChart = echarts.init(chartDom);
  init();
});

watch(
  () => theme.value,
  () => {
    init();
  }
);
</script>
<style scoped lang="less">
.home-charts {
  width: 100%;
  height: 300px;
  background-color: var(--color-bg-1);
}
</style>
